<template>
    <div :class="[background=='#ffffff' ?'toolBarBox_white toolBarBox':'toolBarBox']" style="white-space: nowrap;">
        <!--消息通知-->
        <div class="manage-back-btn" @click="handView()">{{i18n("rightToolBar.inFront","返回前台")}}</div>

        <div class="message" >
            <a-dropdown :placement="'bottomCenter'" v-model="open" :destroyPopupOnHide="true">
                <!--首页右上角工具栏-->
                <a-badge :count="count">
                    <div class="message-item" @mousemove="open = true">
                        <my-icon class="message-icon" type="iconnotice-bell-fill"/>
                    </div>
                </a-badge>

                <template slot="overlay" v-if="remindData.length>0">
                    <div class="await-box" @click.stop="e => e.preventDefault()">
                        <div class="await-tab-box">
                            <a-tabs  v-model="msgActiveKey">
                                <a-tab-pane :key="list.id" v-for="list in remindData" v-if="list.data.data.length>0" :forceRender="true ">
                                    <template slot="tab">{{list.subject}}({{list.data.totalCount}})</template>
                                    <component :is="createdTemp(list.description)"  :list="list.data.data" :icon="list.icon" :reload="getMyRemind"></component>
                                </a-tab-pane>
                            </a-tabs>
                        </div>
                        <div class="look-all-msg">
                            <span @click="lookAllMsg(msgActiveKey)">查看全部消息&gt;</span>
                        </div>
                    </div>
                </template>
            </a-dropdown>
        </div>
        <!--头像-->
        <a-dropdown>
            <!--首页右上角工具栏-->
            <div @click="(e) => e.preventDefault()">
                <span class="names" :class="{names_white:background=='#ffffff'}">{{ user.fullName }}</span>
                <span class="tubiao"><img class="userImg" :src="imgUrl" alt/></span>
            </div>
            <div class="right-tool-menu" slot="overlay">
                <div class="right-tool-menu-common">
                    <div class="right-tool-head">
                        <div class="tubiao" style="margin-right: 12px;width:54px;height:54px"><img class="userImg" :src="imgUrl" alt/></div>
                        <div class="right-tool-fullName">{{ user.fullName }}</div>
                    </div>
                    <div class="right-tool-settings">
                        <div @click="accountSetting" class="right-tool-lis" style="margin-right: 16px"><img
                            src="@/image/icon-zhsz.png"/><span class="right-tool-span">{{ i18n('rightToolBar.accountSet', '账户设置') }}</span></div>
<!--                        <div @click="showDrawer" class="right-tool-lis"><img src="@/image/icon-ztsz.png"/><span
                            class="right-tool-span">{{ i18n('rightToolBar.themeSet', '主题设置') }}</span></div>-->
                    </div>
                    <!--机构切换-->
                    <div style="position: relative" v-if="instList.length>1" @click.stop="showName='showInstList'" @mouseleave="showName=''">
                        <div class="right-tool-list">
                            <my-icon class="right-tool-list-icon" type="iconwodegongsi_gongsixinxi"></my-icon>
                            <div style="flex:1">{{instListType(curInst)}}</div>
                            <div class="right-tool-list-r">
                                {{ i18n('rightToolBar.tenantSwitch', '租户切换') }}
                                <my-icon type="iconjiantou_liebiaoxiangyou"></my-icon>
                            </div>
                        </div>
                        <div class="login-language-common" v-if="showName=='showInstList'">
                            <div class="login-language-common-list" v-for="(item, index) in instList">
                                <div  @click.stop="setInst(item)" class="login-language-common-list-le">{{ item.nameCn }}</div>
                                <my-icon v-if="curInst == item.instId" type="iconicon"></my-icon>
                            </div>
                        </div>
                    </div>
                    <!-- 分公司-->
                    <div style="position: relative" v-if="companyJson && companyJson.companys && companyJson.companys.length>1" @click.stop="showName='companyJson'" @mouseleave="showName=''">
                        <div class="right-tool-list">
                            <my-icon class="right-tool-list-icon" type="iconwodegongsi_gongsixinxi"></my-icon>
                            <div style="flex:1">{{currentCompany}}</div>
                            <div class="right-tool-list-r">
                                {{ i18n('rightToolBar.companySwitch', '分公司切换') }}
                                <my-icon type="iconjiantou_liebiaoxiangyou"></my-icon>
                            </div>
                        </div>
                        <div class="login-language-common" v-if="showName=='companyJson'">
                            <div class="login-language-common-list" v-for="(item, index) in companyJson.companys">
                                <div  @click.stop="setCompany(item)" class="login-language-common-list-le">{{ item.name }}</div>
                                <my-icon  v-if="companyJson.companyId == item.groupId" type="iconicon"></my-icon>
                            </div>
                        </div>
                    </div>
                    <!-- 机构部门 (多个部门时进行显示)-->
                    <div style="position: relative" v-if="departmentList.length>1" @click.stop="showName='showDepartmentList'" @mouseleave="showName=''">
                        <div class="right-tool-list">
                            <my-icon class="right-tool-list-icon" type="iconzuzhijiagou"></my-icon>
                            <div style="flex:1">{{departmentListType(curDepartment)}}</div>
                            <div class="right-tool-list-r">
                                {{ i18n('rightToolBar.departSwitch', '部门切换') }}
                                <my-icon type="iconjiantou_liebiaoxiangyou"></my-icon>
                            </div>
                        </div>
                        <div class="login-language-common" v-if="showName=='showDepartmentList'">
                            <div class="login-language-common-list" v-for="(item, index) in departmentList">
                                <div  @click.stop="setDepartment(item)" class="login-language-common-list-le">{{ item.name }}</div>
                                <my-icon v-if="curDepartment == item.groupId" type="iconicon"></my-icon>
                            </div>
                        </div>
                    </div>
                    <!--时区切换-->
                    <div style="position: relative" v-if="isI18nLang=='YES' " @click.stop="showName='showTime'" @mouseleave="showName=''">
                        <div class="right-tool-list">
                            <my-icon class="right-tool-list-icon" type="iconshiqu"></my-icon>
                            <div style="flex:1"> {{setTimeType(user.timeZone)}}</div>
                            <div class="right-tool-list-r">
                                {{ i18n('rightToolBar.timeZone', '时区切换') }}
                                <my-icon type="iconjiantou_liebiaoxiangyou"></my-icon>
                            </div>
                        </div>
                        <div class="login-language-common" v-if="showName=='showTime'">
                            <div class="login-language-common-list" v-for="(item,index) in timeZoneList" :key="item.type">
                                <div  @click.stop="setTimeZone(item.type)" class="login-language-common-list-le">{{item.name}}</div>
                                <my-icon v-if="user.timeZone==item.type" type="iconicon"></my-icon>
                            </div>
                        </div>
                    </div>
                    <!--语言切换-->
                    <div style="position: relative"  v-if="isI18nLang=='YES'" @click.stop="showName='i18n'" @mouseleave="showName=''">
                        <div class="right-tool-list">
                            <my-icon class="right-tool-list-icon" type="iconearth-full"></my-icon>
                            <div style="flex:1">{{i18nTitle}}</div>
                            <div class="right-tool-list-r">
                                {{ i18n('rightToolBar.LangSwitch', '语言切换') }}
                                <my-icon type="iconjiantou_liebiaoxiangyou"></my-icon>
                            </div>
                        </div>
                        <div class="login-language-common" v-if="showName=='i18n'">
                            <div class="login-language-common-list" v-for="(item,index) in i18nList" :key="item.type">
                                <div  @click.stop="setI18n(item.type)" class="login-language-common-list-le">{{item.name}}</div>
                                <my-icon v-if="i18nTitle==item.name" type="iconicon"></my-icon>
                            </div>
                        </div>
                    </div>
                </div>
                <!--退出登录-->
                <div class="right-tool-longIn" @click="handleLogout">
                    <div class="right-longIn-button"><my-icon type="icontuichudenglu" clas="right-tool-list-icon" style="margin-right: 10px;font-size: 19px"></my-icon>{{i18n('rightToolBar.logOut','退出登录')}}</div>
                </div>
            </div>
        </a-dropdown>
        <!-- 抽屉内容 -->
        <a-drawer :title="i18n('rightToolBar.configuration','系统风格配置')" placement="right" :closable="false"
                  :visible="visible" width="362" @close="onClose">
            <div class="panel">
                <a-divider> {{ i18n('rightToolBar.systemStyle', '系统风格') }}</a-divider>
                <div class="toolbar_menustyles">
                    <div v-for="list in system" @click="onChange_system(list)">
                        <img :src="list.imgUrl"/>
                        <span class="toolbar_Selected" v-if="systemStyle==list.key"></span>
                    </div>
                </div>
            </div>
            <div class="panel">
                <a-divider>{{ i18n('rightToolBar.menuStyle', '菜单风格') }}</a-divider>
                <div class="toolbar_menustyles">
                    <div v-for="list in meustyles" @click="onChange_menu(list)">
                        <img :src="list.imgUrl"/>
                        <span class="toolbar_Selected" v-if="menuStyle==list.key"></span>
                    </div>
                </div>
            </div>
            <div class="panel">
                <a-divider>{{ i18n('rightToolBar.headColor', '头部颜色') }}</a-divider>
                <div class="barclicis">
                    <div @click="barclick(back.background)" v-for="back in backgroundList">
                        <i :style="{ background: back.background }"></i>
                        <span v-if="background == back.background" class="toolbar_Selected"></span>
                    </div>
                </div>
            </div>
            <div class="panel">
                <a-divider>{{ i18n('rightToolBar.sidebarColor', '侧栏颜色') }}</a-divider>
                <div class="barclicis">
                    <div @click="sideBarclick(back.background)" v-for="back in sideBarBackground">
                        <i :style="{ background: back.background }"></i>
                        <span v-if="sideBar_Background == back.background" class="toolbar_Selected"></span>
                    </div>
                </div>
            </div>
            <!--            <div class="panel">
                            <a-divider>{{ i18n('rightToolBar.displayMode', '列表页面显示模式') }}</a-divider>
                            <a-radio-group :value="showType" @change="onChangeShowType">
                                <a-radio v-for="item in showTypes" :value="item.key">
                                    {{ item.text }}
                                </a-radio>
                            </a-radio-group>
                        </div>-->
        </a-drawer>
    </div>
</template>

<script>
import colorList from './color'
import backgroundList from './background'
import {Util,TokenUtil} from "@lowcode/jpaas-common-lib"
import OsUserEdit1 from '@/views/modules/user/org/OsUserEdit1'
import {
    mapActions,
    mapMutations,
    mapState
} from 'vuex'
import insRemindDefApi from '@/api/portal/core/insRemindDef'
import OsInstApi from "@/api/user/org/osInst";
import OsUserApi from "@/api/user/org/osUser";
import OsGroupApi from "@/api/user/org/osGroup";
import extendPortal from "@/api/portal/core/extendPortal";
import SysTimeZoneConfigApi from '@/api/system/core/sysTimeZoneConfig'
import userState from "@/assets/js/userState";
import ReadMessage from "@/views/modules/portal/core/ReadMessage";
import Vue from 'vue'
import InfInnerMsgApi from "@/api/portal/core/infInnerMsg";
import SysAppApi from "@/api/system/core/sysApp";
import BpmInstApi from "@/api/bpm/core/bpmInst";
export default {
    name: 'right-tool-bar',
    mixins: [extendPortal, userState],
    inject:["broadCastChannel"],
    data() {
        return {
            open:false,
            msgActiveKey:'',
            imgUrl: require('@img/avatar2.jpg'),
            colorList,
            departmentList: [],
            curDepartment: '',
            instList: [],
            backgroundList,
            showTypes: [
                {key: "window", text: this.i18n('rightToolBar.popover', '弹窗')},
                {key: "default", text: this.i18n('rightToolBar.noRefresh', '弹窗(不刷新)')},
                {key: "newPage", text: this.i18n('rightToolBar.newPage', '新页面')}
            ],
            meustyles: [{
                key: 'inline',
                text: this.i18n('rightToolBar.embedded', '内嵌菜单'),
                imgUrl: require('@/image/nestedMenu.png')
            },
                {
                    key: 'vertical',
                    text: this.i18n('rightToolBar.vertical', '垂直菜单'),
                    imgUrl: require('@/image/FloatedMenu.png')
                },
            ],


            showRedDot: false, //是否有红点
            remindData: [],
            visible: false,

            isRemind: false,
            skinColor: '06',
            curInst: '',
            showTypeq: '',
            sideBarBackground: [
                {
                    background: '#29304c'
                },
                {
                    background: '#fafafa'
                },
            ],
            system: [{
                key: 'fluctuate',
                text: this.i18n('rightToolBar.upDown', '上下'),
                imgUrl: require('@/image/pageLayout1.png')
            },
                {
                    key: 'around',
                    text: this.i18n('rightToolBar.leftRight', '左右'),
                    imgUrl: require('@/image/pageLayout2.png')
                },
            ],
            companyJson: {
                supportGrade: false,
                companyId: "",
                originCompanyId: "",
                companys: []
            },
            i18nList: [],
            isI18nLang: process.env.VUE_APP_ISLANGUAGE,
            i18nTitle: "中文",
            i18nDefault: process.env.VUE_APP_LANGUAGE,
            timeZoneList: [],
            showName:'',
            isBackFront:false,
        }
    },
    computed: {
        ...mapState({
            menus: state => state.appSetting.menus,
            menuStyle: (state) => state.appSetting.menuStyle,
            showType: (state) => state.appSetting.showType,
            background: (state) => state.appSetting.background,
            user: (state) => state.appSetting.user,
            navigation: state => state.appSetting.navigation,
            sideBar_Background: (state) => state.appSetting.sideBar_Background,
            systemStyle: (state) => state.appSetting.systemStyle,
            frontType:(state) => state.appSetting.frontType
        }),
        currentCompany() {
            if (!this.companyJson.supportGrade) {
                return "";
            }
            if (this.companyJson.companyId == "0") {
                if (this.companyJson.companys && this.companyJson.companys.length > 0) {
                    return this.companyJson.companys[0].name;
                }
                return "";
            }
            let company = this.companyJson.companys.filter(item => {
                return item.groupId == this.companyJson.companyId;
            })[0]
            return company.name;
        },
        /**
         * 是否显示管理后台。
         **/
        showAdmin(){
            if(this.frontType=='user'){
                let ary=this.menus.filter(item => item.navType==1);
                return ary.length>0;
            }
            return false;
        },
        count(){
            return this.remindData.reduce((p,n)=>{
                p+= (n.data.totalCount || 0)
                return p
            },0)
        }
    },
    created() {
        this.initToolBar()
    },

    methods: {
        initToolBar(){
            this.initFront()
            this.initI18n();
            this.initTimeZone();
            this.getFilePath(this.user.photo)
            this.getMyRemind();
            this.defaultColor();
            this.defaultInst();
            this.initInstList();
            this.initDepartmentList();
            //初始华公司
            this.initCompanys();
        },
        initFront(){
            let self = this ;
            this.broadCastChannel.onmessage = function (event){
                //当应用前端关闭时，显示返回前端按钮.
                self.isBackFront = (event.data === 'closeMain');
            }
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, "compomentLang", key);
        },
        ...mapActions({
            Logout: 'user/Logout'
        }),
        ...mapMutations({
            setMenuStyle: 'appSetting/setMenuStyle',
            setLogined: 'appSetting/setLogined',
            setMenuPath: 'appSetting/setMenuPath',
            setSelecteKeys: 'appSetting/setSelecteKeys',
            setOpenKeys: 'appSetting/setOpenKeys',
            backgroundkey: 'appSetting/backgroundkey',
            setShowTypeActive: 'appSetting/setShowTypeActive',
            setActiveKey: 'appSetting/setActiveKey',
            setNavigation: 'appSetting/setNavigation',
            sideBar_Backgroundkey: 'appSetting/sideBar_Backgroundkey',
            setsystemStyle: 'appSetting/setsystemStyle',
            setUser: 'appSetting/setUser',
            setFrontType:'appSetting/setFrontType',
        }),
        setI18n(newLang) {
            let oldLang = window.localStorage.getItem("language");
            this.$i18n.locale = newLang;
            window.localStorage.setItem("language", newLang);
            this.reloadVue(oldLang, newLang);
        },
        reloadVue(oldLang, newLang) {
            if (newLang == oldLang) {
                return;
            }
            let href = location.href;
            if (href.indexOf("?") != -1) {
                href += "&rxTime=" + new Date().getTime();
            } else {
                href += "?rxTime=" + new Date().getTime();
            }
            location.href = href;
        },
        initI18n() {
            let i18nStr = window.localStorage.getItem("i18nList");
            if (i18nStr) {
                this.i18nList = JSON.parse(i18nStr);
            }
            let langType = window.localStorage.getItem("language");
            let obj = this.i18nList.find(row => {
                return langType == row.type;
            });
            if (obj) {
                this.i18nTitle = obj.name;
            }
        },
        //初始化时区
        initTimeZone() {
            let langType = window.localStorage.getItem("language");
            this.getTimeZone(langType);
        },
        //获取时区配置列表
        async getTimeZone(langType) {
            let self = this;
            let res = await SysTimeZoneConfigApi.getConfig(langType);
            if (res && res.length >= 0) {
                self.timeZoneList = res;
            }
        },
        setTimeZone(timeZone) {
            this.user.timeZone = timeZone;
            OsUserApi.setTimeZone(timeZone);
        },
        defaultInst() {
            this.curInst = this.user.tenantId;
        },
        initInstList() {
            OsInstApi.getMyApplyList().then(res => {
                this.instList = res.data;

            })
        },
        initDepartmentList() {
            OsGroupApi.getDepartments().then(res => {
                let data = res.data;
                this.curDepartment = data.curDepartment;
                this.departmentList = data.groups;
            })
        },
        /**
         * 初始化公司
         */
        initCompanys() {
            OsGroupApi.getCompanys().then(res => {
                this.companyJson = res;
            })
        },
        /**
         * 设置当前公司。
         * @param item
         */
        setCompany(item) {
            //设置当前公司。
            OsGroupApi.setCompany(item.groupId).then(res => {
                this.initCompanys();
            })
        },
        /**
         * 退出公司切换。
         */
        handleSwitchCompany() {
            OsGroupApi.exitSwitchCompany().then(res => {
                this.initCompanys();
            })
        },
        /**
         * 设置当前部门。
         * @param item
         */
        setDepartment(item) {
            var self_ = this;
            //设置当前公司。
            OsGroupApi.setDepartment(item.groupId).then(res => {
                /*
                 *切换成功，更新当前用户信息
                 * 1、更新当前公司信息
                 * 2、更新当前部门信息
                 * 3、更新用户信息对象
                 */
                self_.initCompanys();
                self_.initDepartmentList();
                let user = self_.user;
                user.deptId = item.groupId;
                user.deptName = item.name;
                self_.setUser(user);
            })
        },
        setInst(item) {
            //修改当前用户租户信息
            OsUserApi.switchTenantId(item.instId).then(res => {
                if (!res.success) {
                    this.$message.warn(res.message);
                    return;
                }
                //刷新当前页面
                window.location.reload();
            })
        },

        showDrawer() {
            this.visible = true
        },
        onClose() {
            this.visible = false
        },
        //选择菜单
        onChange_menu(e) {
            this.menuStyleClick(e.key)
        },
        //选择系统分格
        onChange_system(e) {
            this.setLayoutStyle('systemStyle',e.key)
            this.setsystemStyle(e.key)
        },

        onChangeShowType(e) {
            //选择列表 按钮的弹窗模式;
            var val = e.target.value
            this.setShowTypeActive(val);
        },
        handleLogout() {

            this.$confirm({
                title: this.$ti18('rxMsa.actionTips', '操作提示'),
                content: this.i18n('rightToolBar.wantToLogOut', '真的要注销登录吗 ？'),
                okText: this.$ti18('rxForm.ackBtn', '确认'),
                cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                onOk: () => {
                    return this.Logout({})
                        .then(() => {
                            this.setLogined(false)
                            this.setMenuPath('')
                            this.setSelecteKeys([])
                            this.setOpenKeys([])
                            //退出登录时移除token.
                            TokenUtil.removeToken();
                            localStorage.removeItem('store')
                            localStorage.removeItem('curUser')
                            let baseUrl = process.env.BASE_URL
                            window.location.href=`${baseUrl}login?redirect=${baseUrl}admin`;
                        })
                        .catch((err) => {
                            this.$message.error({
                                title: this.i18n('rightToolBar.error', '错误'),
                                description: err.message,
                            })
                        })
                },
                onCancel() {
                },
            })
        },

        setLayoutStyle(key,value){
            let curUser = localStorage.getItem("curUser") ;
            let obj = JSON.parse(localStorage.getItem(`layoutStyleConfig_${curUser}`));
            if(obj){
                obj[key] = value ;
                localStorage.setItem(`layoutStyleConfig_${curUser}`, JSON.stringify(obj));
            }
        },
        barclick(bar) {
            this.setLayoutStyle('background',bar)
            this.backgroundkey(bar)
        },
        sideBarclick(value) {
            this.setLayoutStyle('sideBar_Background',value)
            this.sideBar_Backgroundkey(value)
        },
        menuStyleClick(str) {
            //存放到vuex
            this.setLayoutStyle('menuStyle',str)
            this.setMenuStyle(str)
        },

        defaultColor() {
            let curUserId = localStorage.getItem("curUser") ;
            var _skinColor = localStorage.getItem(`skinColor_${curUserId}`);
            if (_skinColor) {
                this.skinColor = _skinColor;
            }
        },
        setColor(item) {
            // this.setSkinColor(item)
            let colorStyle = document.getElementById('colorStyle');
            let baseURL = process.env.BASE_URL
            let _url = baseURL + 'skinCss/skin' + item.value + '.css'
            colorStyle.setAttribute("href", _url);
            this.skinColor = item.value;
            let curUserId = localStorage.getItem("curUser") ;
            localStorage.setItem(`colorStyle_${curUserId}`, _url);
            localStorage.setItem(`skinColor_${curUserId}`, item.value);
        },
        accountSetting() {
            let self = this ;
            Util.open({
                    component: OsUserEdit1,
                    curVm: self,
                    widthHeight: ['1000px', '600px'],
                    title: self.i18n('rightToolBar.accountSetting', '账号设置'),
                    data: {
                        userId: self.user.userId
                    },
                },
                function (action) {
                }
            )
        },
        getFilePath(fileId) {
            if (fileId && fileId != '') {
                let token = TokenUtil.getToken();
                fileId = Util.encryptWord(fileId)
                this.imgUrl = '/api/api-system/system/core/sysFile/previewFile?fileId=' + fileId + "&accessToken=" + token
            }
        },
        remindClick(item) {
            this.handUrlClick(item.url);
        },

        getMyRemind(init) {
            var that = this;
            insRemindDefApi.getMyRemind().then((res) => {
                if (res.data && res.data.length > 0) {
                    that.showRedDot = true;
                    that.remindData = res.data;
                } else {
                    that.showRedDot = false;
                    that.remindData = []
                }
                if(init){
                  return;
                }
                that.msgActiveKey = that.remindData[0].id;
            });
            if (!this.isRemind) {
                this.isRemind = true;
                setInterval(function () {
                    that.getMyRemind(true)
                }, 180000);
            }
        },
        setTimeType(type){
            let name = ''
            this.timeZoneList.filter(res=>{
                if(type ==res.type){
                    name = res.name;
                }
            })
            if(name){
                return name;
            }
            return this.i18n('rightToolBar.timeZoneSelect', '请选择');
        },
        instListType(type){
            let name = ''
            this.instList.filter(res=>{
                if(type ==res.instId){
                    name = res.nameCn;
                }
            })
            return name;
        },
        departmentListType(type){
            let name = ''
            this.departmentList.filter(res=>{
                if(type ==res.groupId){
                    name = res.name;
                }
            })
            return name;
        },
        handView(){
            this.isBackFront = false;
            // const windowName = 'appHome'; // 使用固定的窗口名称
            // const newWindow = window.open('/main/appHome?from=admin', windowName);
            // if (newWindow && !newWindow.closed) {
            //     newWindow.focus()
            // } else {
            //     console.error('无法聚焦到已打开的窗口，可能是窗口被阻止或已关闭。');
            // }
            window.open('/main/appHome?from=admin',"_blank");
        },
        createdTemp(cmp){
            let id = Util.randomId()
            return Vue.component(id,{
                template:`<div><template v-for="item of list">${cmp}</template></div>`,
                props:['list','icon','reload'],
                methods:{
                    async openInst(appId,instId,taskId){

                        var self=this;
                        var url=null;
                        let appKey;
                        if(appId && appId!='0'){
                            var  res= await SysAppApi.get(appId);
                            let app= res.data;
                            if("1"==app.menuNavType ||"2"==app.menuNavType){
                                url=app.path;
                                appKey=app.clientCode;
                            }
                        }
                        self.encryptInstId(instId,function(encryptInstId){
                            appId=encryptInstId.appId;
                            encryptInstId=encryptInstId.instId;
                            SysAppApi.get(appId).then(res=>{
                                let app=res.data;
                                let path=app.path;
                                let url=`${path}/${app.clientCode}/openDoc/${encryptInstId}?appId=${appId}`;
                                if(taskId){
                                    url += "&taskId="+taskId;
                                }
                                window.open(url,"_blank" );
                            })
                        })
                    },
                    encryptInstId(instId,callback){
                        BpmInstApi.getBpmInstEncrypt(instId).then(res=>{
                            if(!res.success){
                                this.$message.warn(res.message);
                                return;
                            }
                            callback(res.data);
                        })
                    },
                    async showMessage(obj){
                        if (obj.isRead != 'yes') {
                            await InfInnerMsgApi.readMessage({msgId: obj.pkId})
                        }
                        obj.isRead = 'yes' ;
                        this.reload(true);
                        Util.open({
                            curVm:this,
                            widthHeight:['500px','300px'],
                            title:'查看消息',
                            component:ReadMessage,
                            data: {
                                infInnerMsg: obj
                            }
                        })
                    },
                    daysBetween(specificDateStr) {
                        const specificDate = new Date(specificDateStr);
                        const today = new Date();
                        const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
                        const diff = Math.abs(specificDate.getTime() - today.getTime()); // 计算两个日期的毫秒数之差
                        //一分钟之内
                        if (diff < 60 * 1000){
                            return '刚刚'
                        }
                        let day = Math.floor(diff / oneDay); // 返回相差天数，向下取整
                        if(day === 0){
                            const hoursDiff = diff / (1000 * 60 * 60);
                            const h = Math.floor(hoursDiff);
                            if(h > 0){
                                return `${h}小时前`;
                            }else {
                                const minuteDiff = diff / (1000 * 60);
                                const m = Math.floor(minuteDiff);
                                return `${m}分钟前`
                            }
                        }
                        if(day > 0 && day < 7){
                            return `${day}天前`
                        }else if(day >= 7 && day < 30){
                            let w =Math.floor(day / 7)
                            return `${w}周前`
                        }else if(day >= 30 && day < 60){
                            return `一个月前`
                        }else {
                            return specificDateStr
                        }
                    },
                }

            })
        },
        lookAllMsg(msgActiveKey){
            let select = this.remindData.find(item=>item.id === msgActiveKey)
            if(select){
                let { id,subject,url } = select ;
                let obj = {
                    title:subject,
                    key:id,
                    showType:'URL',
                    path:url,
                    collapsed:true,
                }
                this.setActiveKey(obj.key)
                let isIndex = this.navTabs.findIndex(nav=>{return nav.key == obj.key})
                if(isIndex<0){
                    this.navigation[this.frontType].push(obj);
                }
                //静态路由跳转
                this.$router.push({
                    path: url
                });
            }
        },
    },
}
</script>

<style lang="less">
.right-tool-longIn{
    border-top:1px solid #d9d9d9;
    display: flex;
    color: #333333;
    align-items: center;
    font-size: 14px;
    padding-top:9px;
    width: 100%;
    cursor: pointer;
    margin-top: 16px;

}
.right-longIn-button{
    width: calc(100% - 48px);
    margin: auto;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 40px;
}
.right-longIn-button:hover{
    background-color: #fff1f0;
    border-radius: 4px;
    color: red;
}
.right-tool-list-r {
    display: flex;
    align-items: center;
    color: #999999;

    i {
        margin-left: 10px;
        font-size: 23px;
    }
}

.right-tool-list-icon {
    margin-right: 14px;
    font-size: 20px;
    color: #333333;
}

.right-tool-list {
    display: flex;
    height: 40px;
    line-height: 40px;
    color: #333333;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid white;
    padding-left: 5px;
}
.right-tool-list:hover{
    border: 1px solid rgb(66, 133, 244);
    border-radius: 5px;
}
.right-tool-menu {
    width: 450px;
    background-color: #ffffff;
    box-shadow:2px 5px 20px 2px rgba(47, 44, 44,0.2);
    border-radius: 4px;
    padding-bottom: 10px;
    margin-right: 25px;
}
.right-tool-menu-common{
    padding: 24px 24px 0px 24px;
}
.right-tool-head {
    display: flex;
    align-items: center;
}

.right-tool-fullName {
    font-size: 16px;
    color: #333333;
    font-weight: bold;
}

.toolBarBox {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 10px;
}

.toolBarBox_white ul li {
    background-color: rgb(233 236 239) !important;
}

.toolBarBox_white ul li i {
    color: #b1b6bb !important;
}

.message-icon {
    font-weight: bold;
    color: white!important;
    line-height: 38px;
    font-size: 20px;
}

.tubiao {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
    font-size: 0;
    margin-left: 5px;
    cursor: pointer;
}

.tubiao .userImg {
    height: 100%;
}

.names {
    display: inline-block;
    vertical-align: middle;
    color: white;
    margin-right: 5px;
}

.names_white {
    color: #555 !important;
}

.right-tool-settings {
    display: flex;
    margin-top: 24px;
    margin-bottom: 16px;
}

.right-tool-lis {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 74px;
    background-color: #f5f9ff;
    border-radius: 4px;
    cursor: pointer;
}

.right-tool-span {
    margin-left: 16px;
    font-weight: bold;
    font-size: 14px;
    color: #333333;
    display: block;
}

/*------------*/
.login-language-common {
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.08);
    border-radius: 4px 4px 4px 4px;
    position: absolute;
    top: 40px;
    right: 0px;
    padding: 10px 0px;
    z-index: 9999;
}

.login-language-common-list {
    height: 32px;
    align-items: center;
    display: flex;
    cursor: pointer;
    padding: 0px 5px;
    margin: 0px 5px;
    border-right: 2px;

    i {
        color: #1890FF;
        font-size: 18px;
    }
}

.login-language-common-list:hover {
    background: rgba(24, 144, 255, 0.1);
}

.login-language-common-list-le {
    flex: 1;
    font-weight: 400;
    color: #29304C;
    font-size: 14px;
}

.login-language-head {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 30px;
    color: white;
    font-size: 14px;
    margin-top: 27px;
    margin-right: 15px;
}

.toolbar_menustyles {
    display: flex;
}

.toolbar_menustyles > div {
    width: 60px;
    margin-right: 26px;
}

.toolbar_menustyles > div:hover {
    cursor: pointer;
}

.toolbar_menustyles > div img {
    width: 60px;
    height: 50px;
    background-color: #4d5b70;
    box-shadow: 0px 1px 5px 0px rgba(0, 21, 41, 0.16);
    border-radius: 5px;
}

.toolbar_Selected {
    margin: 8px auto;
    width: 6px;
    height: 6px;
    display: block;
    background-color: #4285f4;
    border-radius: 3px;
}

.toolBarBox {
    display: flex;
}

.user {
    margin-top: 24px;
}

.user .names {
    color: white;
}

.names_white {
    color: #555 !important;
}

.panel > span {
    display: block;
    margin-bottom: 20px;
    overflow: hidden;
}

.panel {
    margin-bottom: 30px;
}

.barclicis {
    display: flex;
    width: 30px;
    cursor: pointer;
}

.barclicis > div {
    margin-right: 9px;
}

.barclicis i {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: solid 1px #dadde0;
    border-radius: 3px;
}

.newdian {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: red;
    display: block;
    position: absolute;
    top: 6px;
    right: 5px;
}

.toolBarBox ul {
    font-size: 0;
    white-space: nowrap;
    margin-top: 22px;
}

.toolBarBox ul li {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    position: relative;
    width: 38px;
    height: 38px;
    background-color: rgba(0, 0, 0, .1);
    border-radius: 50%;
    margin-right: 10px;
}

.toolBarBox ul li:hover {
    background-color: rgba(0, 0, 0, .2);
}

.toolBarBox ul li i {
    color: white;
    line-height: 38px;
    font-size: 20px;
}

.itmeBox {
    padding: 0 10px;
}

.iconSize {
    font-size: 16px;
}

.toolBarBox a {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
}

.text {
    display: inline-block;
    padding-left: 4px;
}

.listBox {
    display: flex;
    align-items: center;
}

.itmeSkin {
    flex: 1;
    padding-right: 6px;
}

/*报错消息*/
.itmeBox .spot {
    position: absolute;
    top: -1px;
    right: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: red;
    display: inline-block;
}

.my-error-window {
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 0 5px -1px rgba(0, 0, 0, .45);
    border-radius: 4px;
    font-size: 14px;
    padding: 10px;
    max-width: 280px;
    min-width: 280px;
    word-break: break-all;
    white-space: normal;
    text-align: left;
}

.errorContainer {
    overflow: hidden;
}

.errorIcon {
    float: left;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    background: #ff6766;
    margin-right: 10px;
}

.errorIcon i {
    color: #fff;
    font-size: 12px;
}
.message{
    height: 32px;
    line-height: 37px;
    margin-right: 20px;
}
.manage-back-btn{
    height: 32px;
    line-height: 32px;
    padding: 0 16px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
    margin-right: 20px;
    cursor: pointer;
    font-size: 14px;
}
.manage-back-btn i{
    font-size: 18px;
    margin-right: 6px;
}




.await-box{
    width: 380px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 1px 20px 0 rgba(0, 0, 0, .2);
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1fr auto;
}
.await-tab-box{
    width: 100%;
    overflow: hidden;
    padding:10px 20px;
}
.await-box   .msg-tips-row{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    overflow: hidden;
}
.await-box   .msg-row-icon{
    position: relative;
    font-size: 16px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
    background: linear-gradient(141.03deg, rgba(115, 162, 255, 1) 0%, rgba(57, 123, 255, 1) 100%);
}
.await-box   .msg-row-icon:before{
    content: '';
    right: 0;
    top: 0;
    border: 1px solid #fff;
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 81, 81, 1);
}


.await-box   .msg-row-content {
    line-height: 18px;
    cursor: pointer;
    flex: 1;
    overflow: hidden;
}
.await-box   .msg-row-text {
    color: rgba(0, 0, 0, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.await-box .msg-row-disabled{
    color: #b5b5b5!important;
}
.await-box   .msg-row-text ~ span{
    font-size: 12px;
    color: #b5b5b5;
}
.await-box   .msg-row-content a{
    color: rgba(0, 0, 0, 0.85);
}

.await-box .msg-row-content:hover .msg-row-text{
    color: #4d9eff;
}
.await-box .my-a:visited .msg-row-text{
    color: #b5b5b5!important;
    text-decoration:underline!important;
}
.await-box .my-a:visited .msg-row-icon:before{
    background-color: #b5b5b5;
}

.look-all-msg{
    border-top: 1px solid rgba(232, 232, 232, 1);
    text-align: center;
    padding: 6px;
}
.look-all-msg span{
    display: inline-flex;
    padding:4px 10px;
    color: rgba(66, 133, 244, 1);
    cursor: pointer;
}

.message-item{
    padding-right: 10px;
}
</style>
